<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>common</title>
    <div th:fragment="common-css">
        <!--bootstrap核心css-->
        <link rel="stylesheet" th:href="@{/assets/bootstrap/css/bootstrap.min.css}">
    </div>


</head>
<body>

<!--顶部导航-->
<!--注：是<nav>包裹.container-fluid-->
<nav th:fragment="top-nav" class="navbar navbar-default">
    <div class="container-fluid">
        <!--第一部分-->
        <!-- 用于自适应 -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" th:href="@{/}">XXX租赁系统
                <small>v1.00</small>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!--第二部分-->
            <ul class="nav navbar-nav">
                <li ><a th:href="@{/}">首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">导航二</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">下拉菜单 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:;">修改内容</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>

            <!--第三部分-->
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>

            <!--第四部分-->
            <ul class="nav navbar-nav navbar-right">
                <!--登录之前-->
                <li shiro:guest id="loginBtn"><a href="javascript:;">登录</a></li>


                <!--登录之后-->
                <li shiro:authenticated  id="myRole"><a href="javascript:;">[[${session.loginUserRating}]]：<span
                        class="text-danger">[[${session.loginUserName}]]</span></a></li>
                <li  shiro:authenticated  class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">个人信息 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/account/changepwd}" target="_blank">修改密码</a></li>
                        <li><a th:href="@{/account/staffinfo}" target="_blank" href="#">个人信息</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a th:href="@{/userController/loginOut}">退出</a></li>
                    </ul>
                </li>
                <!--  登录之后-->
            </ul>
        </div><!--class="collapse navbar-collapse"的div-->
    </div><!--container的div-->
</nav>
<!--顶部导航-->


<!--左侧导航-->
<div th:fragment="left-nav" class="col-xs-2">
    <shiro:authenticated>
        <div class="panel-group">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title"><a data-toggle="collapse" href="#panelOne">用户管理</a></h3>
                </div>
                <!--in表示默认打开，并用一个div把panel-body包裹-->
                <div id="panelOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <ul class="list-group list-unstyled" style="overflow: hidden">
                            <li class="list-group-item"><a href="">Cras justo odio</a></li>
                            <li class="list-group-item"><a href="">Dapibus ac facilisis in</a></li>
                            <li class="list-group-item"><a href="">Morbi leo risus</a></li>
                            <li class="list-group-item"><a href="">Porta ac consectetur ac</a></li>
                            <li class="list-group-item"><a href="">Vestibulum at eros</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title"><a data-toggle="collapse" href="#panelTwo">标题二</a></h3>
                </div>
                <div id="panelTwo" class="panel-collapse collapse ">
                    <div class="panel-body">
                        狗财狗财狗财狗财狗财狗财
                    </div>
                </div>
            </div>

            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title"><a data-toggle="collapse" href="#panelThree">标题三</a></h3>
                </div>
                <div id="panelThree" class="panel-collapse collapse ">
                    <div class="panel-body">
                        狗亮 狗亮 狗亮 狗亮 狗亮 狗亮
                    </div>
                </div>
            </div>

        </div>
    </shiro:authenticated>
</div>
<!--左侧导航-->


<div th:fragment="common-js">
    <!--jquery必须在 bootstrap.js之上-->
    <script th:src="@{/assets/bootstrap/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/assets/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/laydate/laydate.js}"></script>
</div>


<!--/account/下的左侧导航-->
<div th:fragment="common-account-left-nav" class="col-sm-2">
    <ul class="nav nav-pills nav-stacked text-center ">
        <li id="left_bar_staffinfo"><a th:href="@{/account/staffinfo}">个人信息</a></li>
        <li id="left_bar_uploadheadphoto"><a th:href="@{/account/uploadheadphoto}">修改头像</a></li>
        <li id="left_bar_changepwd"><a th:href="@{/account/changepwd}">修改密码</a></li>
    </ul>

</div>
<!--/account/下的左侧导航-->

</body>


</html>